// 我的发票   
<template>
  <div class="myInvoice">
    <ul class="title">
      <li
        v-for="(item,key) in title"
        :key="key"
        :class="key == index ? 'active' : '' "
        @click="changesjump($event,key)"
      >
        {{item.name}}
        <i v-show="item.num">({{item.num}})</i>
      </li>
    </ul>

    <div class="tables" v-if="!index">
      <!-- <p style="line-height:30px;font-size:12px;color:#ccc">有1条普通发票</p> -->

      <el-table :data="tableOrdinary" style="width: 100%" v-loading="loading">
        <el-table-column label="发票抬头" prop="invoice"></el-table-column>
        <el-table-column label="开户银行" width="260" prop="bank_account"></el-table-column>
        <el-table-column label="银行账号" width="360" prop="bank_num"></el-table-column>
        <el-table-column label="税号" prop="tax_num"></el-table-column>
      </el-table>
    </div>

    <div class="tables" v-if="index">
      <!-- <p style="line-height:30px;font-size:12px;color:#ccc">有1条普通发票</p> -->
      <el-table :data="tableProfession" style="width: 100%">
        <el-table-column label="发票抬头" prop="invoice"></el-table-column>
        <el-table-column label="开户银行" width="260" prop="bank_account"></el-table-column>
        <el-table-column label="银行账号" width="360" prop="bank_num"></el-table-column>
        <el-table-column label="税号" prop="tax_num"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "myInvoice",
  data() {
    return {
      loading: false,
      title: [
        {
          name: "增值税普通发票",
          id: 0
        },
        {
          name: "增值税专用发票",
          id: 1
        }
      ],
      index: 0,
      tableOrdinary: [], // 普通的
      tableProfession: [] // 专业的
    };
  },

  methods: {
    // 获取数据
    async getData() {
      this.loading = true;
      let user_id = this.$store.state.UserInfor.user_id;
      try {
        const res = await this.$http({
          method: "post",
          url: "/api/index/web/myInvoice",
          data: {
            user_id
          }
        });
        console.log(res);
        if (res.data.State.Code == 200) {
          let arr = res.data.data;
          console.log(arr);
          this.loading = false;
          // 发票抬头数据处理
          let invoice = arr.company_name;
          let tableProfession = arr.profession.concat();
          let tableOrdinary = arr.ordinary.concat();
          if (tableProfession.length > 1) {
            tableProfession = tableProfession.map(item => {
              return {
                ...item,
                invoice
              };
            });
          }
          if (tableOrdinary.length > 1) {
            tableOrdinary = tableOrdinary.map(item => {
              return {
                ...item,
                invoice
              };
            });
          }

          this.tableProfession = tableProfession; // 专业的
          this.tableOrdinary = tableOrdinary; // 普通的
          console.log(this.tableProfession, this.tableOrdinary);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 导航点击
    changesjump(ev, key) {
      this.index = key;
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.myInvoice {
  width: 970px;
  background: #fff;
  padding: 15px;
  box-sizing: border-box;
  // padding-bottom: 800px;
  margin-bottom: 30px;
  .title {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    margin-bottom: 20px;
    li {
      line-height: 56px;
      font-size: 16px;
      text-align: center;
      padding: 5px 10px;
      letter-spacing: 1.5px;
      margin: 0 15px;
      cursor: pointer;
      i {
        color: #ff9000;
      }
    }
    .active {
      color: #ff9000;
      line-height: 56px;
      font-weight: bold;
      border-bottom: #ff9000 solid 2px;
    }
  }
}
</style>
